﻿<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>SALUBRIDAD</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!-- FontAwesome - http://fortawesome.github.io/Font-Awesome/ -->
    <link rel="stylesheet" href="css/font-awesome.min.css" />
    <!-- jQueryMobileCSS - original without styling -->
    <link rel="stylesheet" href="css/jquerymobile.css" />
    <!-- nativeDroid core CSS -->
    <link rel="stylesheet" href="css/jquerymobile.nativedroid.css" />
    <!-- nativeDroid: Light/Dark -->
    <link rel="stylesheet" href="css/jquerymobile.nativedroid.light.css" id='jQMnDTheme' />
    <!-- nativeDroid: Color Schemes -->
    <link rel="stylesheet" href="css/jquerymobile.nativedroid.color.purple.css" id='jQMnDColor' />
    <style type="text/css">
        .parra_texto
        {
            font-weight: 300;
            margin: 7px 0;
            white-space: normal;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            min-height: 59px;
            width: 100%;
        }
        .listdo_iconos
        {
            padding-bottom: 0px;
            border: 0 !important;
            width: 200px;
        }
        
        .imagen_icono
        {
            /*float:left !important;        */
        }
        
        .ui-btn-inner
        {
            white-space: normal !important;
        }
        
        .ui-body-b .ui-collapsible-heading-toggle
        {
            border-bottom-width: 0px !important;
        }
        
        .ui-collapsible-heading-toggle .ui-btn-text
        {
            font-size: 16px !important;
        }

         #map-canvas
        {
            position: absolute;
            height: 75%;
            width: 100%;
            background-color: White;
        }

        .styled-select
        {
            width: 90%;
            height: 34px;
            overflow: hidden;
            background: url(imagenes/flecha_abajo.png) no-repeat right #ddd;
            padding: 3px;
            margin: 5px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
            -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
            box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
            color: #888;
            border: none;
            outline: none;
            display: inline-block;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            cursor: pointer;
        }
    </style>
    <!-- jQuery / jQueryMobile Scripts -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script src="js/funciones.js"></script>
    <script src="js/jquery.knob.js"></script>
    
    <script>
        $(document).ready(function () {
            
            $('.ui-icon.ui-icon-arrow-d.ui-icon-shadow').hide();
            verDatos();
        });


        function calcularRiesgo(valor) {
            //Sin riesgo 0 - 5
            //Riesgo bajo 5.1 - 15
            //Riesgo medio 14.1 - 35
            //Riesgo alto 35.1 - 80
            //Inviable sanitariamente > 80

            if (valor <= 5) {
                return "0";
            }
            else if (valor <= 15) {
                return "0";
            }
            else if (valor <= 35) {
                return "1";
            }
            else if (valor <= 80) {
                return "2";
            }
            else {
                return "2";
            }

        }
        
        function verDatos() {
             
            var departamento = document.getElementById('departamentos_combo').value;
            var cantidadDpto = 0;
            var sumaDpto = 0;
            var url = "http://servicedatosabiertoscolombia.cloudapp.net/v1/Instituto_Nacional_de_Salud/indiceirca?$filter=departamento='"+departamento+"'&$format=json";
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'jsonp',
                crossDomain: true,
                success: function (data) {
                    $.each(data, function (i, field) {
                        var cant = field.length;
                        $.each(field, function (x, item) {
                            cantidadDpto++;
                            sumaDpto += parseFloat(field[x].promedio_irca);        
                        });
                    });

                    var riesgoDecimal = (parseFloat(sumaDpto).toFixed(2) / parseFloat(cantidadDpto).toFixed(2)).toFixed(1);

                    if (!isNaN(riesgoDecimal)) 
                    {
                        var riesgo = calcularRiesgo(riesgoDecimal);
                        var cadena = "";

                        if (riesgo === "0") 
                        {
                            cadena = '<div class="message success"> <i class="icon-ok"></i><p>Nivel de riesgo: '+ riesgoDecimal +'.</p></div>';
                        } 
                        else if (riesgo === "1")
                        {
                            cadena = '<div class="message warning"> <i class="icon-warning-sign"></i><p>Nivel de riesgo: '+ riesgoDecimal +'.</p></div>';  
                        } 
                        else if (riesgo === "2")
                        {
                            cadena = '<div class="message error"> <i class="icon-warning-sign"></i><p>Nivel de riesgo: '+ riesgoDecimal +'.</p></div>';      
                        }

                       $('#mensajeRiesgo').empty();
                       $('#mensajeRiesgo').append(cadena);
                    } 
                    else 
                    {
                       $('#mensajeRiesgo').empty();
                       $('#mensajeRiesgo').append("<div class='message info'><i class='icon-lightbulb'></i><p>No se encontraron datos para el departamento.</p></div>");
                    }
                },
                error: function (x, y, z) {
                    console.log("Error retrieving ws");
                }
            });
        }
    </script>
</head>
<body>
    <div data-role="page" data-theme='b'>
        <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'>
            <a href="index.html" data-ajax="false"><i class='icon-ellipsis-vertical'></i></a>
            <h1>
                SALUBRIDAD</h1>
        </div>

        <div data-role="content">
            <ul data-role="listview" data-divider-theme="b" data-icon="false" data-filter="false"
                data-filter-theme="b" class='showastabs'>
                <li data-role="list-divider">Nivel de Salubridad</li>
            </ul>
            <div class='message info'>
                <i class='icon-info-sign'></i>
                <p>
                    En esta secci&oacute;n podr&aacute; consultar el nivel de salubridad del agua para un departamento específico
                </p>
            </div>
            <strong><span style="font-size: 18px !important; color: Black; font-weight: 400;">Seleccione
                el departamento a consultar:</span> 
            </strong>
                <br />
            <select id="departamentos_combo" class="styled-select" onchange="verDatos()">
                                                    <option value="Amazonas">Amazonas</option>
                                                    <option value="Antioquia">Antioquia</option>
                                                    <option value="Arauca">Arauca</option>
                                                    <option value="Atlantico">Atlántico</option>
                                                    <option value="Bolivar">Bolívar</option>
                                                    <option value="Boyacá">Boyacá</option>
                                                    <option value="Caldas">Caldas</option>
                                                    <option value="Caqueta">Caquetá</option>
                                                    <option value="Casanare">Casanare</option>
                                                    <option value="Cauca">Cauca</option>
                                                    <option value="Cesar">Cesar</option>
                                                    <option value="Choco">Chocó</option>
                                                    <option value="Cordoba">Córdoba</option>
                                                    <option value="Cundinamarca">Cundinamarca</option>
                                                    <option value="Guainia">Guainía</option>
                                                    <option value="Guaviare">Guaviare</option>
                                                    <option value="Huila">Huila</option>
                                                    <option value="Guajira">La Guajira</option>
                                                    <option value="Magdalena">Magdalena</option>
                                                    <option value="Meta">Meta</option>
                                                    <option value="Nariño">Nariño</option>
                                                    <option value="Norte de Santander">Norte de Santander</option>
                                                    <option value="Putumayo">Putumayo</option>
                                                    <option value="Quindio">Quindío</option>
                                                    <option value="Risaralda">Risaralda</option>
                                                    <option value="San Andres">San Andrés y Providencia</option>
                                                    <option value="Santander">Santander</option>
                                                    <option value="Sucre">Sucre</option>
                                                    <option value="Tolima">Tolima</option>
                                                    <option value="Valle">Valle del Cauca</option>
                                                    <option value="Vaupes">Vaupés</option>
                                                    <option value="Vichada">Vichada</option>
                                                </select>
               <div id="mensajeRiesgo">
               </div>
               <br>
               <h3>
                    Niveles de Riesgo
               </h3>
               <h4>
                    <label style="padding-right:43px;"> 0 - 5 : </label>  Sin Riesgo
               <h4>
                 <h4>
                    <label style="padding-right:23px;"> 5.1 - 14 : </label> Riesgo Bajo
               <h4>
                 <h4>
                    <label style="padding-right:15px;"> 14.1 - 35 : </label> Riesgo Medio
               <h4>
                <h4>
                   <label style="padding-right:15px;">35.1 - 80 : </label> Riesgo Alto
               <h4>
                  <h4>
                    <label style="padding-right:15px;"> Mayor a 80 : </label> Inviable Sanitariamente
               <h4>
        </div>
        <div data-position="fixed" data-tap-toggle="false" data-role="footer" data-tap-toggle="false" data-theme='b'>
            <div data-role="navbar">
                <ul>
                    <li><a href="https://www.facebook.com/gobiernoenlinea" target="_blank" data-icon="facebook"></a></li>
                    <li><a href="https://twitter.com/Gobiernoenlinea" target="_blank" data-icon="twitter"></a></li>
                    <li><a href="http://www.youtube.com/user/Vivegobiernoenlinea" target="_blank" data-icon="youtube"></a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
